<template>
    <div class="storeInfo">
        <div class="head">    
            <el-form :model="form" class="headForm">
                <el-form-item style="width:230px">
                    <el-date-picker
                        v-model="timerange"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-select clearable v-model="form.room_id" placeholder="房间号">
                        <el-option v-for="item in roomlist" :key="item.room_id" :label="item.room_name" :value="item.room_id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="">
                    <el-input v-model="form.stage_id" placeholder="场次ID"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="orderCode" placeholder="订单号/流水号/美团券号"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="mobile" placeholder="用户名称/手机号"></el-input>
                </el-form-item>

                <el-form-item label="">
                    <el-select clearable v-model="form.pay_from" placeholder="支付方式">
                        <el-option v-for="item in payforlist" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select clearable v-model="form.order_status" placeholder="订单状态">
                        <el-option v-for="item in orderstatuslist" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select clearable v-model="form.order_type" placeholder="订单类型">
                        <el-option v-for="item in ordertypelist" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>


                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form>      
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <el-table-column prop="" label="订单" fixed width="260">
                    <template slot-scope="scope">
                        <p style="text-algin:left">订单号：{{scope.row.order_id}}</p>
                        <p style="text-algin:left">场次号：{{scope.row.stage_id}}</p>
                        <p style="text-algin:left">流水号：{{scope.row.note_no}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="用户信息">
                    <template slot-scope="scope">
                        <p>{{scope.row.nickname}}</p>
                        <p>{{scope.row.mobile}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="room_name" label="房间号"></el-table-column>
                <el-table-column prop="order_price" label="金额"></el-table-column>
                <el-table-column prop="total_price" label="实付"></el-table-column>                
                <el-table-column prop="pay_from_cn" label="支付方式"> </el-table-column>
                <el-table-column prop="order_status_cn" label="订单状态"></el-table-column>
                <el-table-column prop="order_type_cn" label="订单类型" width="150"></el-table-column>
                <el-table-column prop="platform_cn" label="来源" width="150"> </el-table-column>
                <el-table-column prop="pay_time" label="支付时间"></el-table-column>
                <el-table-column  label="查看" prop="price_id" v-if="limitList.length>0">
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row.order_id)">
                            <i>{{item.name}}</i><i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>

                </el-table-column>
                <el-table-column label="查看"  v-else>/</el-table-column>

            </el-table>
                        
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
        <orderDetail :detailShow="detailShow" :detailData="detailData"></orderDetail>
        


    </div>
</template>
<style lang="scss">
.el-table .cell{text-align: left}
</style>

<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
import orderDetail from '../../pop/orderDetailOprate.vue';
// import {draggable} from 'vuedraggable';
export default {
    components:{
        orderDetail
    },
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            pageNum:1,
            form:{
                size:20,
                page:'1'

            },
            limitList:[
                {url:"detail",name:'详情'}
            ],
            roomlist:[],
            payforlist:[
                //<!--0=未知,1=支付宝,2=微信(钱先到魅平台，月底结算打给加盟商),3=pos支付,4=美团券,5=备用金,6=vip卡,7=0元支付,8=优惠券,9=口碑券,10=支付宝个人账户,11=个人微信（钱直接到加盟商手里）,12=门店卡支付-->
                {status:'2',status_cn:"微信支付"},
                {status:'1',status_cn:"支付宝支付"},
                {status:'3',status_cn:"POS支付"},
                {status:'4',status_cn:"美团券支付"},
                {status:'5',status_cn:"备用金支付"},
                {status:'6',status_cn:"VIP卡支付"},
                {status:'7',status_cn:"0元下单"},
                {status:'8',status_cn:"优惠券"},
                {status:'9',status_cn:"口碑券支付"},
                {status:'10',status_cn:"ALIPAY"},
                {status:'11',status_cn:"WECHATPAY"},
                {status:'12',status_cn:"门店卡支付"},
            ],
            orderstatuslist:[
               // <!订单状态--0=待支付,1=已支付,2=消费中,3=已消费,4=已接单,5=已送达,-1=系统取消（订单未付款，系统自动关闭）,-2=申请退款,-3=驳回退款,-4=退款中,-5=已退款-->
                {status:'0',status_cn:'待支付'},
                {status:'1',status_cn:'已支付未接单'},
                {status:'2',status_cn:'已接单未送达'},
                {status:'3',status_cn:'已送达'},
                {status:'-1',status_cn:'系统取消'},
                {status:'-2',status_cn:'申请退款'},
                {status:'-3',status_cn:'退款驳回'},
                {status:'-4',status_cn:'退款中'},
                {status:'-5',status_cn:'已退款'},
            ],
            //<!订单类型--0=无效,1=预定开房,2=前台开房,3=一般消费,4=换房,5=补时,6=打赏,7=vip充值赠送酒水,8=卡座消费,9=门店卡充值消费-->
            ordertypelist:[
                {status:'1',status_cn:'预定开房'},
                {status:'2',status_cn:'前台开房'},
                {status:'3',status_cn:'一般消费'},
                {status:'4',status_cn:'换房'},
                {status:'5',status_cn:'补时'},
                {status:'6',status_cn:'打赏'},
                {status:'7',status_cn:'VIP充值赠送酒水'},
                {status:'8',status_cn:'卡座消费'},
                {status:'9',status_cn:'门店卡充值消费'},
            ],
            orderCode:'',
            mobile:'',
            timerange:[],
            detailShow:false,
            detailData:{
                fee_items:{
                    items_detail:[],
                    time_detail:[]

                }
            },
            // detailData:[
            //     {title:'order_id',title_cn:'订单号',content:''},
            //     {title:'stage_id',title_cn:'场次id',content:''},
            //     {title:'operate_name',title_cn:'操作员',content:''},
            //     {title:'note_no',title_cn:'流水号',content:''},
            //     {title:'order_status_cn',title_cn:'状态',content:''},
            //     {title:'charmber_name',title_cn:'房间',content:''},
            //     {title:'nickname',title_cn:'会员',content:''},
            //     {title:'platform_cn',title_cn:'来源',content:''},
            //     {title:'order_price',title_cn:'金额',content:''},
            //     {title:'no_recycle_price',title_cn:'已付',content:''},
            //     {title:'vip_reduce_price',title_cn:'VIP折扣',content:''},
            //     {title:'reduce_price',title_cn:'备用金减免',content:''},
            //     {title:'coupon_price',title_cn:'优惠券减免',content:''},
            //     {title:'total_price',title_cn:'实付',content:''},
            //     {title:'pay_from_cn',title_cn:'支付方式',content:''},
            //     //meituan_coupon_no;pos_no;out_trade_no
            //     {title:'meituan_coupon_no',title_cn:'交易号',content:''},

            //     {title:'order_time',title_cn:'下单时间',content:''},
            //     //start_time-end_time
            //     {title:'start_time',title_cn:'消费时间段',content:''},
            //     {title:'coupon_price',title_cn:'优惠券减免',content:''},
            // ]
            
            
        }
    },
    mounted(){
        var that = this;
        abc.get(that,potUrl.roomlist,{},(res)=> {
            that.roomlist = res.data;
            console.log(res.data)
        })//获取门店房间列表-

        abc.get(that,potUrl.orderv2list,that.form,(res)=>{
            that.total = parseInt(res.data.total)
            that.tableData =  res.data.list
        });//列表
        
    },
    methods:{
        search(){
            const that = this;
            that.form.start_time = that.timerange[0];
            that.form.end_time = that.timerange[1];
            if(that.orderCode != ''){
                that.form.keyword = that.orderCode
            }else{
                if(that.mobile != ''){
                    that.form.keyword = that.mobile;
                }
            }
            abc.get(that,potUrl.orderv2list,that.form,(res)=>{
                that.total = parseInt(res.data.total)
                that.tableData =  res.data.list;
            });//列表
        },
        theClick(url,a){
            var that = this;
            if(url == 'detail'){
                abc.get(that,potUrl.orderv2info,{order_id:a},(res)=>{
                    that.detailShow = true;
                    let obj = res.data;
                    console.log(obj)
                    if(obj.fee_items == null ){
                        obj.fee_items.items_detail = [];
                        obj.fee_items.time_detail = [];
                    }
                    that.detailData = obj
                })
            }         
        },           
        changePage(val){
            var that = this;
            console.log(that.form)
            that.pageNum = val;
            that.form.page = val;
           abc.getList(that,potUrl.orderv2list,that.form);
        }



    }
}

</script>